import React, {useEffect, useState} from 'react'
import {Button, Row, Col, message, Form, Select, Upload, Space} from 'antd'

import type {UploadFile, UploadProps} from 'antd/es/upload/interface'
import {history} from 'umi'
import styles from './index.less'

import {addDeploy} from '@/service/workflow/deploy'
import {getDict} from '@/service/common/dict'

const userOption = [
	{
		id: '1',
		name: '元宝',
	},
]
const deploy = () => {
	const [form] = Form.useForm()
	const [dict, setDict] = useState({
		Process_Type: [],
	})

	// 文件上传配置
	const [fileList, setFileList] = useState<UploadFile[]>([])
	const uploadProps: UploadProps = {
		onRemove: (file) => {
			const index = fileList.indexOf(file)
			const newFileList = fileList.slice()
			newFileList.splice(index, 1)
			setFileList(newFileList)
		},

		beforeUpload: (file) => {
			setFileList([...fileList, file])
			return false
		},
	}
	// 数据初始化
	useEffect(() => {
		getDict(
			{
				dictKeys: ['Process_Type'],
			},
			(res: any) => {
				setDict(res)
			},
		)
	}, [])

	// 流程部署提交
	const submit = async () => {
		const form1 = await form.validateFields()
		const file = form1?.attachmentList?.file
		const formD = new FormData()
		formD.append('file', file)
		formD.append('tenantId', form1.tenantId)
		formD.append('categoryp', form1.categoryp)
		addDeploy(formD)
			.then((res) => {
				if (res.success) {
					message.success(res.msg)
					form.resetFields()
					setFileList([])
				}
			})
			.catch((err) => {
				message.error(err)
			})
	}
	return (
		<div className={styles.page}>
			<Form
				form={form}
				name="basic"
				layout="horizontal"
				labelCol={{flex: '90px'}}
				labelAlign="right"
				labelWrap
				initialValues={{remember: true}}
				autoComplete="off">
				<Row gutter={12} justify="center">
					<Col span={24} />
					<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
						<Form.Item
							label="流程类型"
							name="categoryp"
							rules={[
								{
									required: true,
								},
							]}>
							<Select
								placeholder="请选择"
								allowClear
								fieldNames={{
									value: 'dictKey',
									label: 'dictValue',
								}}
								options={[...dict.Process_Type]}
							/>
						</Form.Item>
					</Col>
					<Col span={24} />
					<Col span={24} />
					<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
						<Form.Item
							label="所属租户"
							name="tenantId"
							rules={[
								{
									required: true,
								},
							]}>
							<Select
								placeholder="请选择"
								allowClear
								fieldNames={{value: 'id', label: 'name'}}
								options={userOption}
							/>
						</Form.Item>
					</Col>
					<Col span={24} />
					<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
						<Form.Item
							label="附件上传"
							name="attachmentList"
							rules={[
								{
									required: true,
								},
							]}>
							<Upload {...uploadProps}>
								{fileList.length !== 1 ? (
									<Button
										type="primary"
										ghost
										shape="round"
										size="small">
										请选择文件
									</Button>
								) : (
									''
								)}
							</Upload>
						</Form.Item>
					</Col>
					<Col span={24} />
					<Col sm={{span: 24}} md={{span: 12}} lg={{span: 8}}>
						<Space size={12} className="btnCenter">
							<Button
								onClick={() => {
									history.go(-1)
								}}>
								取消
							</Button>
							<Button
								type="primary"
								htmlType="submit"
								onClick={submit}>
								保存
							</Button>
						</Space>
					</Col>
				</Row>
			</Form>
		</div>
	)
}

export default deploy
